<template>
	<div class="branch-wrap" style="margin-left: 0px;">
		<div class="branch-box-wrap" style="min-height: auto;">
			<div class="branch-box" style="margin-top: 0px;border-left: 2px solid #ccc;min-height: auto;">
				<div class="col-box" style="padding-left: 36px;padding-right: 36px;">
					<div class="condition-node" style="min-height: auto;">
						<div class="condition-node-box" style="padding-top: 0px;">
							<div class="node-wrap-box" style="z-index: 2000;width: auto;">

								<div class="content" style="color: rgb(130, 140, 165);">

									<em class="item-index">{{nodeConfig.index}}</em>

									<el-icon class="close" @click.stop="delNode()"><el-icon-close /></el-icon>

									<div v-if="false" class="flex" style="padding: 5px;padding-right: 25px;">
										<div class="flex ai-center jc-center">
											<div class="item-icon">
												<img
													src="https://fe-1304214004.file.myqcloud.com/images/ssp/20221215/g8tjb9yt.png">
											</div>
										</div>
										<div>
											<div class="high-light">微信公众号v3.0-收发消息</div>
											<div><span class="high-light">触发: </span>接收文本消息</div>
										</div>
									</div>

									<div v-else class="flex" style="padding: 5px;padding-right: 25px;">
										<div class="flex ai-center jc-center">
											<div class="item-icon">
												<img
													src="https://fe-1304214004.file.myqcloud.com/images/ssp/20221215/g8tjb9yt.png">
											</div>
										</div>
										<!-- <div class="flex ai-center jc-center">
                      <div><span class="high-light">执行条件: </span> 设定触发后续流程的执行条件 </div>
                    </div> -->

										<div>
											<div class="high-light">执行条件</div>
											<div><span class="high-light"></span>设定触发后续流程的执行条件</div>
										</div>
									</div>
								</div>


							</div>
							<template v-if="nodeConfig.ifNode">
								<add-node v-model="nodeConfig.ifNode.childNode"></add-node>
							</template>
						</div>
					</div>
					<div class="if-wrap">
						<slot v-if="nodeConfig.ifNode && nodeConfig.ifNode.childNode" :node="nodeConfig.ifNode"></slot>
					</div>
					<div class="top-left-cover-line-cur" style="
      position: absolute;
      height: 50px;
      width: 50%;
      top: -10px;
      left: -5px;
      border-bottom: 2px solid #ccc;
      border-left: 5px solid #f6f8f9;
            ">
					</div>

					<div class="top-left-cover-line"></div>
					<div class="top-right-cover-line"></div>
					<div class="bottom-right-cover-line"></div>
				</div>
			</div>
			<add-node v-model="nodeConfig.childNode"></add-node>
		</div>
	</div>
</template>

<script>
	import addNode from './addNode'

	export default {
		inject: ['select'],
		props: {
			modelValue: {
				type: Object,
				default: () => {}
			}
		},
		components: {
			addNode
		},
		data() {
			return {
				nodeConfig: {},
				drawer: false,
				isEditTitle: false,
				form: {}
			}
		},
		watch: {
			modelValue() {
				this.nodeConfig = this.modelValue
			}
		},
		mounted() {
			this.nodeConfig = this.modelValue
		},
		methods: {
			safeStringify(obj, indent = 2) {
				let cache = [];
				const retVal = JSON.stringify(
					obj,
					(key, value) =>
					typeof value === "object" && value !== null ?
					cache.includes(value) ?
					undefined // 如果在对象中找到循环引用就返回undefined，以避免错误
					:
					cache.push(value) && value // 否则将值添加到缓存中
					:
					value,
					indent
				);
				cache = null; // 释放缓存
				return retVal;
			},
			show() {
				this.form = {}
				this.form = JSON.parse(this.safeStringify(this.nodeConfig))
				this.drawer = true
			},
			editTitle() {
				this.isEditTitle = true
				this.$nextTick(() => {
					this.$refs.nodeTitle.focus()
				})
			},
			saveTitle() {
				this.isEditTitle = false
			},
			save() {
				this.$emit("update:modelValue", this.form)
				this.drawer = false
			},
			delNode() {
				this.$emit("update:modelValue", this.nodeConfig.childNode)
			},
			selectHandle(type, data) {
				this.select(type, data)
			},
			addConditionListAnd(item) {
				item.push({
					label: '',
					field: '',
					operator: '=',
					value: ''
				})
			},
			addConditionListOr() {
				this.form.inputs.conditionList.push([{
					label: '',
					field: '',
					operator: '=',
					value: ''
				}])
			},
			deleteConditionListItem(item, index) {
				item.splice(index, 1)
			},
			deleteConditionList(index) {
				this.form.inputs.conditionList.splice(index, 1)
			},
			toText(nodeConfig) {
				if (nodeConfig.nodeUserList && nodeConfig.nodeUserList.length > 0) {
					const users = nodeConfig.nodeUserList.map(item => item.name).join("、")
					return users
				} else {
					if (nodeConfig.userSelectFlag) {
						return "发起人自选"
					} else {
						return false
					}

				}
			}
		}
	}
</script>

<style scoped>
	.del-box .del {
		background: none;
	}

	.del-box .del:hover {
		background: #F56C6C;
	}

	.del-box .del {
		background: #fff;
		color: #999;
		width: 32px;
		height: 32px;
		line-height: 32px;
		text-align: center;
		border-radius: 50%;
		font-size: 12px;
		cursor: pointer;
	}

	.del-box .del:hover {
		background: #F56C6C;
		color: #fff;
	}


	.bottom-right-cover-line::before {
		content: "";
		position: absolute;
		display: inline-block;
		width: 0;
		height: 0;
		left: -11px;
		bottom: -8px;
		border-top: 10px solid transparent;
		border-bottom: 10px solid transparent;
		border-left: 10px solid rgb(202, 202, 202);
	}

	.top-left-cover-line-cur::before {
		color: rgba(25, 31, 37, 0.4);
		content: "条件不满足";
		position: absolute;
		display: inline-block;
		width: 0;
		height: 0;
		left: -26px;
		bottom: 0px;
		/*     border-top: 10px solid transparent;
      border-bottom: 10px solid transparent;
      border-left: 10px solid rgb(202, 202, 202);*/
	}

	.sc-workflow-design .node-wrap-box::before {
		/*left:calc(50% - 6px) !important;*/
	}
</style>
